<script src="../vue.min.js"></script>

<div class="box">
    <h1>购物车</h1>
    <table border="1">
        <thead>
            <tr>
                <th>全选<input type="checkbox" @click="selectAll($event)"></th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in arr">
                <td><input type="checkbox" :checked="item.is" @click="select(item.id)"></td>
                <td>{{item.name}}</td>
                <td>{{item.price | fn()}}</td>
                <td>
                    <button @click="quantity('-',item.id)">-</button>
                    <span>{{item.num}}</span>
                    <button @click="quantity('+',item.id)">+</button>
                </td>
                <td>{{subtotal(item.id) | fn()}}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <p>总计:{{Total_price | fn()}}</p>
    </div>
</div>

<script>
    new Vue({
        el: '.box',
        data: {
            arr: [{
                id: 1,
                name: '商品1',
                price: 100,
                num: 1,
                subtotal: 100,
                is: false
            }, {
                id: 2,
                name: '商品2',
                price: 213,
                num: 1,
                subtotal: 213,
                is: false
            }, {
                id: 3,
                name: '商品3',
                price: 52,
                num: 1,
                subtotal: 52,
                is: false
            }],
            total: 0,
        },
        // 方法
        methods: {
            // 数量加减
            quantity(type, id) {
                let arr = this.arr.find(item => item.id == id)
                if (type == "-" && arr.num > 1) {
                    arr.num--
                        arr.subtotal = arr.num * arr.price
                } else if (type == "+") {
                    arr.num++
                        arr.subtotal = arr.num * arr.price
                }
            },
            // 计算小计
            subtotal(id) {
                return this.arr.find(item => item.id == id).subtotal
            },
            // 单选
            select(id) {
                let x = this.arr.find(item => item.id == id)
                x.is = !x.is
            },
            // 全选
            selectAll(event) {
                this.arr.forEach(item => {
                    item.is = event.target.checked
                });
            }
        },
        // 计算属性
        computed: {
            // 总计计算（只计算选中的商品）
            Total_price() {
                this.total = 0
                this.arr.forEach(item => {
                    if (item.is) {
                        this.total += item.subtotal
                    }
                })
                return this.total
            }
        },
        // 过滤器
        filters: {
            // 给价格加上￥符号
            fn(x) {
                return '￥' + x
            }
        }
    })
</script>